import Vue from 'vue'

// 图片懒加载自定义指令
Vue.directive('img-lazy', {
    inserted(el, binding) {
        // el: 指令绑定元素
        // binding: 指令绑定的表达式

        // 创建一个IntersectionObserver（观察者）实例
        const observer = new IntersectionObserver((entries) => {
            // 当有新的可视区域进入时调用
            entries.forEach(item => {
                if (item.isIntersecting) {
                    // 进入可视区
                    // 加载图片
                    el.setAttribute('src', binding.value)
                    // 取消监听
                    observer.unobserve(el)
                }
            })
        })
        // 监听指令绑定元素
        observer.observe(el)
    }
})